<template>
  <div class="hot_category">
    <div class="top_bar">
      <div class="title">热门分类</div>
    </div>
    <van-divider></van-divider>
    <div class="category_content">
      <div class="category_item" v-for="item in hotCategory" :key="item.id">
        <img :src="item.imgurl" alt="" />
        <p>{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    let hotCategory = reactive([
      {
        id: 1,
        imgurl: require("@/assets/hotCategory/item1.png"),
        url: '',
        title: '家庭常备',
      },
      {
        id: 2,
        imgurl: require("@/assets/hotCategory/item2.png"),
        url: '',
        title: '风湿骨伤',
      },
      {
        id: 3,
        imgurl: require("@/assets/hotCategory/item3.png"),
        url: '',
        title: '妇科用药',
      },
      {
        id: 4,
        imgurl: require("@/assets/hotCategory/item4.png"),
        url: '',
        title: '呼吸系统',
      },
      {
        id: 5,
        imgurl: require("@/assets/hotCategory/item5.png"),
        url: '',
        title: '心脑血管',
      },
      {
        id: 6,
        imgurl: require("@/assets/hotCategory/item6.png"),
        url: '',
        title: '肠胃消化',
      },
      {
        id: 7,
        imgurl: require("@/assets/hotCategory/item7.png"),
        url: '',
        title: '儿童用药',
      },
      {
        id: 8,
        imgurl: require("@/assets/hotCategory/item8.png"),
        url: '',
        title: '中药饮片',
      },
      {
        id: 9,
        imgurl: require("@/assets/hotCategory/item9.png"),
        url: '',
        title: '皮肤用药',
      },
      {
        id: 10,
        imgurl: require("@/assets/hotCategory/item10.png"),
        url: '',
        title: '其它',
      },
    ])
    return {
      hotCategory,
    }
  },
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.hot_category {
  .top_bar{
    height: 43px;
    background: #ffffff;
    border-radius: 10px 10px 0px 0px;
    .title {
      width: 61px;
      height: 43px;
      font-size: 15px;
      line-height: 43px;
      font-weight: bold;
      text-align: left;
      color: #333333;
      margin-left: 12.5px;
    }
  }
  .category_content {
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: 0px 0px 10px 10px;
    padding-bottom: 19px;
    .category_item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 20%;
      margin-top: 13.5px;
      img {
        width: 41px;
        margin: 0 auto;
      }
      p {
        margin-top: 7px;
        width: 100%;
        height: 12px;
        line-height: 12px;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        color: #333333;
        transform: scale(0.9);
      }
    }
  }
}
</style>
